<template>
    <div class="new-grid file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="form">
                    <div class="form-item">
                        <div class="label">仿真工程名称</div>
                        <pui-input placeholder="请输入仿真工程名称" v-model="componentRef.gridName" type="input" clearAble full></pui-input>
                    </div>
                    <!-- <div class="form-item">
                        <div class="label">保存路径</div>
                        <pui-input disabled placeholder="默认路径" v-model="props.directoryPath" type="input" full icon="folder-open" iconPosition="right" @onIconClick="openFolderBrowser"></pui-input>
                    </div> -->
                    <div class="form-item">
                        <div class="label">工程类型</div>
                        <pui-selector :dataList="componentRef.projectType.deviceList" v-model="componentRef.deviceType" @onChange="projectTypeChange"></pui-selector>
                        <pui-selector :dataList="componentRef.projectType.modelList" v-model="componentRef.modelType"></pui-selector>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button type="primary" @click="createNewActiveDevice">创建</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'NewGraph'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import { deviceManager } from '@/services/phot_client/device'
import { PhotGrid } from '@/common/types/phot_types'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '新建有源器件仿真工程'
    },
    animate: {
        type: String,
        default: 'fade'
    },
    directoryPath: {
        type: String,
        default: ''
    }
})
const emit = defineEmits({
    openFolderBrowser: (val: any) => {},
    onClose: (val: any) => {},
    sendActiveDeviceData: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    gridName: '',
    address: '默认位置',
    projectType: {
        deviceList: [
            // {
            //     value: 'semiconductor',
            //     label: '半导体器件',
            //     children: [
            //         {
            //             value: 'quantumWell',
            //             label: '多量子阱',
            //         },
            //         {
            //             value: 'volume',
            //             label: '体材料',
            //         }
            //     ]
            // },
            {
                value: 'opticalFiber',
                label: '有源光纤器件',
                children: [
                    {
                        value: 'amplifier',
                        label: '有源光纤放大器',
                    },
                    {
                        value: 'laser-line',
                        label: '有源光纤激光器(线形)',
                    },
                    {
                        value: 'laser-ring',
                        label: '有源光纤激光器(环形)',
                    },
                ]
            },
            {
                value: 'electroOptical',
                label: '有源电光器件',
                children: [
                    {
                        value: 'MZModulator',
                        label: 'MZ调制器',
                    }
                ]
            },
        ],
        modelList: [
            {
                value: 'amplifier',
                label: '有源光纤放大器',
            },
            {
                value: 'laser-line',
                label: '有源光纤激光器(线形)',
            },
            {
                value: 'laser-ring',
                label: '有源光纤激光器(环形)',
            },
        ]
    },
    deviceType: 'opticalFiber',
    modelType: ''
})
watch([() => props.directoryPath],(v1) => {
    // console.log(v1)
    componentRef.address = v1[0]
    console.log(componentRef.address)
})
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}

const createNewActiveDevice = async () => {
    emit('sendActiveDeviceData', {modelType: componentRef.modelType, deviceType: componentRef.deviceType})
    closeDialog()
}
const openFolderBrowser = () => {
    emit('openFolderBrowser', 'new grid')
}

const projectTypeChange = (e: any) => {
    componentRef.projectType.modelList = e.children
}

defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>